import React from 'react'
import recommend from './styles/recommend.module.css'


interface RecommendProps {
    type: number
    title: string
}

interface Props {
    recomInfo: RecommendProps
}

interface book {
    url: string,
    name: string,
    info: string,
    author: string,
    type: string
}

const rank: Array<{ name: string, rank: number }> = [
    { name: '星武纪元', rank: 153859 },
    { name: '星武纪元', rank: 15348 },
    { name: '星武纪元', rank: 15347 },
    { name: '星武纪元', rank: 15348 },
    { name: '星武纪元', rank: 15345 },
    { name: '星武纪元', rank: 15344 },
    { name: '星武纪元', rank: 1533 },
    { name: '星武纪元', rank: 154 },
    { name: '星武纪元', rank: 153 },
    { name: '星武纪元', rank: 148 },
]

const tempBooks: book[] = [
    {
        url: 'https://static.zongheng.com/upload/cover/e8/2b/e82b5ba24de070c7ea985af3bfec56b91716541913299.jpeg',
        name: '徒儿你无敌了，下山祸害清冷女总裁吧',
        info: '九阳之体，灵山守身十八载。一朝下山，清冷总裁赖上我？',
        author: '东楼大官人',
        type: '都市'
    },
    {
        url: 'https://static.zongheng.com/upload/cover/e8/2b/e82b5ba24de070c7ea985af3bfec56b91716541913299.jpeg',
        name: '徒儿你无敌了，下山祸害清冷女总裁吧',
        info: '九阳之体，灵山守身十八载。一朝下山，清冷总裁赖上我？',
        author: '东楼大官人',
        type: '都市'
    },
    {
        url: 'https://static.zongheng.com/upload/cover/e8/2b/e82b5ba24de070c7ea985af3bfec56b91716541913299.jpeg',
        name: '徒儿你无敌了，下山祸害清冷女总裁吧',
        info: '九阳之体，灵山守身十八载。一朝下山，清冷总裁赖上我？',
        author: '东楼大官人',
        type: '都市'
    },
    {
        url: 'https://static.zongheng.com/upload/cover/e8/2b/e82b5ba24de070c7ea985af3bfec56b91716541913299.jpeg',
        name: '徒儿你无敌了，下山祸害清冷女总裁吧',
        info: '九阳之体，灵山守身十八载。一朝下山，清冷总裁赖上我？',
        author: '东楼大官人',
        type: '都市'
    },
    {
        url: 'https://static.zongheng.com/upload/cover/e8/2b/e82b5ba24de070c7ea985af3bfec56b91716541913299.jpeg',
        name: '徒儿你无敌了，下山祸害清冷女总裁吧',
        info: '九阳之体，灵山守身十八载。一朝下山，清冷总裁赖上我？',
        author: '东楼大官人',
        type: '都市'
    },
    {
        url: 'https://static.zongheng.com/upload/cover/e8/2b/e82b5ba24de070c7ea985af3bfec56b91716541913299.jpeg',
        name: '徒儿你无敌了，下山祸害清冷女总裁吧',
        info: '九阳之体，灵山守身十八载。一朝下山，清冷总裁赖上我？',
        author: '东楼大官人',
        type: '都市'
    }
]
const Recommend :React.FC<Props> = ({ recomInfo }) => {
    // const { type, title } = recomInfo
    const { title } = recomInfo
    return (
        <div className={recommend.app}>
            <div className={recommend.left}>
                <div className={recommend.title}>
                    { title }
                </div>
                <div className={recommend.bookhead}>
                    <div className={recommend.head_url}>
                        <div className={recommend.img_url}>
                            <img className={recommend.img} src={tempBooks[0].url} alt="" />
                        </div>
                        <div className={recommend.head_info}>
                            <div className={recommend.txt}>{tempBooks[0].name}</div>
                            <div className={recommend.txt}>{tempBooks[0].author}</div>
                            <div className={recommend.sub_txt}>{tempBooks[0].info}</div>
                        </div>
                    </div>
                    <div className={recommend.back}>
                    </div>
                </div>
            </div>
            <div className={recommend.mid}>
                <div className={recommend.title}>
                    {/* { title } */}
                </div>
                <div className={recommend.mid_books}>
                    {
                        tempBooks.map((book, index) => {
                            return (
                                <div className={recommend.mid_book} key={index}>
                                    <div className={recommend.mid_left}>
                                        <img src={book.url} alt="" />
                                    </div>
                                    <div className={recommend.mid_right}>
                                        <div className={recommend.mid_info}>
                                           <div className={recommend.mid_book_name}>
                                                {book.name}
                                            </div>
                                            <div className={recommend.mid_book_sub}>
                                                {book.info}
                                            </div> 
                                        </div>
                                        <div className={recommend.mid_txt}>
                                            {book.author} <span>{book.type}</span>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
            <div className={recommend.right}>
                <div className={recommend.title}>
                    TOP10 月票榜
                </div>
                <div className={recommend.rank}>
                    {
                        rank.map((item, index) => {
                            return (
                                <div className={recommend.rank_item} key={index}>
                                    <div className={recommend.rank_num}>{index + 1}</div>
                                    <div className={recommend.rank_name}>{item.name}</div>
                                    <div className={recommend.rank_num}>{item.rank}</div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        </div>
    )
}

export default Recommend